<template>
  <div class="container">
    <div v-if="msg !== ''">
      <!--<vue-markdown>{{ msg }}</vue-markdown>-->
      <mavon-editor
        class="md"
        :value="msg"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />
    </div>
  </div>
</template>

<script>
// import VueMarkdown from 'vue-markdown'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { URL_NOTEBOOK } from '@/config/index'

mavonEditor.getMarkdownIt().use(require('markdown-it-latex2img'))
mavonEditor.getMarkdownIt().use(require('markdown-it-anchor').default) // Optional, but makes sense as you really want to link to something
mavonEditor.getMarkdownIt().use(require('markdown-it-table-of-contents'), {markerPattern: /^\[toc\]/im})

export default {
  name: 'Notebook',
  components: {
    // VueMarkdown
    mavonEditor
  },
  props: ['path'],
  created () {
    this._getData(this.path)
  },
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    _getData (path) {
      var password = window.sessionStorage.getItem('password') || ''
      fetch(URL_NOTEBOOK, {
        method: 'POST',
        body: JSON.stringify({ path: path, password: password }),
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      }).then(res => res.json()).catch(error => console.error('Error:', error)).then(res => {
        if (res.status === 'success') {
          this.msg = res.data
        } else {
          console.log(res)
          alert(res.data || 'error')
          window.sessionStorage.removeItem('password')
          window.history.back()
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
